import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';

class GuidePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <View style={[styles.bgColor, styles.flex]}>
        <View style={styles.wrapper}>
          <Image style={[styles.guideName]} source={require('../../../img/guide_name.png')} />
          <Image style={[styles.guide]}source={require('../../../img/guide.png')} />
          <TouchableOpacity
            activeOpacity={0.6}
            style={[styles.knowWrapper]}
            onPress={() => this.props.onPress()}
          >
            <Text style={[styles.know]}>我知道了</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  flex: {
    flex: 1,
  },
  wrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '100%',
    paddingTop: PxToDp(26),
    backgroundColor: 'transparent',
  },
  guideName: {
    position: 'absolute',
    top: PxToDp(15),
    left: PxToDp(6),
  },
  guide: {
    position: 'absolute',
    top: PxToDp(100),
    left: PxToDp(64),
  },
  knowWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(142),
    height: PxToDp(44),
    backgroundColor: '#f65252',
    borderRadius: PxToDp(100),
    borderColor: '#fff',
    borderWidth: PxToDp(2),
  },
  know: {
    color: '#fff',
    fontSize: PxToDp(16),
  },
});

export default GuidePage;
